<template>
    <div class="detail-page">
        <div class="detail-main">
            <!-- <h3 class="detail-title" v-show="show">证书名称</h3> -->
            <img :src="url" alt="" v-show="show">
            <img id='IframeReportImg' src='' style='display: none;' />
            <div style="width:100%;display:flex;justify-content:center" v-show="show">
                <div class="down" @click="downs1(url)">下载证书</div>
            </div>

        </div>


    </div>
</template>

<script>
import'../../assets/css/style.less'
import'../../assets/css/fonts/iconfont.css'
export default {
    components: {

    },
    data(){
        return{
            show:false,
            url:'',
            id:"",
        }
    },
    created(){
        // console.log(window.location.search,89)
        this.url = this.$axios.defaults.baseURL+this.$route.query.imgUrl;
        console.log(this.url,111111)
        this.show = true;
    },
    mounted(){
      //   this.show = true;
      //   function getQueryString(name) {
      //     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      //     var r = window.location.search.substr(1).match(reg);
      //     if (r != null) {
      //         return unescape(r[2]);
      //     }
      //     return null;
      // }
      // this.url = getQueryString('url');
      //   console.log(this.url,22)

        //console.log(decodeURIComponent(window.location),89)
        //this.url = this.$url+this.$route.params.url;
    },
    head() {
        return {
          title: '证书详情',
        }
    },
    methods:{
        downloadIamge(imgsrc, name) {//下载图片地址和图片名
          var image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = imgsrc;
        },
        downs(url){
          this.downloadIamge(url, 'pic')
        },
        downs1(url) {

            function  downloadIamge(imgsrc, name) {
              //下载图片地址和图片名
              var image = new Image();
              // 解决跨域 Canvas 污染问题
              image.setAttribute("crossOrigin", "anonymous");
              image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
              };
              image.src = imgsrc;
            }
            downloadIamge(url,'证书');
          // var alink = document.createElement("a");
          // alink.href = url;
          // alink.download = "pic"; //图片名
          // alink.click();
        }
    }
}
</script>

<style lang="less">

.detail-page {
    width:100%;
    height:100%;
    display:flex;
    overflow-y:auto;
    justify-content:center;
    // position:absolute;
    // left:0;
    // top:0;
    .detail-main{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        flex-wrap:wrap;
        margin-top:20px;
        .detail-title{
            line-height:40px;
            margin-top:70px;
            font-size:24px;
            color:#555555;
            text-align:center;
            width:100%;
        }
        img{
            display:block;
            max-width:100%;
            margin-top:40px;
            max-width:900px;
        }
        .down{
            width:120px;
            height:50px;
            line-height:50px;
            text-align:center;
            color:#ffffff;
            font-size:16px;
            border-radius:5px;
            background:#1783dd;
            margin:60px 0;
            cursor:pointer;
        }
    }
}
</style>
